<template>
  <div :style="getStyle()">
    <a-icon @click="$emit('close',id)" style="position: absolute;right: 12px;top: 12px;size: 24px" type="close"></a-icon>
    <chrome-picker
      :value="settingStyle.color"
      @input="c=>updateValue(c,'color')"
      ref="chromePicker"
      :style="{'position':'absolute','z-index':'2','top':'73px','right':'38px','background-color':'red'}"
      v-show="visiblePicker"></chrome-picker>
    <chrome-picker
      :value="settingStyle.fontColor"
      ref="chromeFontPicker"
      @input="c=>updateValue(c,'fontColor')"
      :style="{'position':'absolute','z-index':'2','top':'122px','right':'38px','background-color':'red'}"
      v-show="visibleFontPicker"></chrome-picker>
    <a-form>
      <a-form-item
        style="margin-top: 36px"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="节点颜色">
        <a-input
          :disabled="true"
          style="width: 75%"
          v-model="settingStyle.color">
          <div
            @click="v=>showColorPicker(v,0)"
            slot="addonAfter"
            :style="{'width':'20px','height':'20px','background-color':settingStyle.color}"></div>
        </a-input>
      </a-form-item>
      <a-form-item
        class="relation_graph_setting_space"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="文本颜色">
        <a-input
          :disabled="true"
          style="width: 75%"
          v-model="settingStyle.fontColor">
          <div
            @click="v=>showColorPicker(v,1)"
            slot="addonAfter"
            :style="{'width':'20px','height':'20px','background-color':settingStyle.fontColor}"></div>
        </a-input>
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="relation_graph_setting_space"
        label="节点形状">
        <a-radio-group
          @change="v=>configChange(v,'nodeShape')"
          size="small"
          v-model="settingStyle.nodeShape"
          button-style="solid">
          <a-radio-button :value="0">圆形</a-radio-button>
          <a-radio-button :value="1">矩形</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        class="relation_graph_setting_space"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="节点大小">
        <span>宽度</span>
        <a-input-number
          :min="1"
          :max="300"
          @blur="v=>configChange(v,'width')"
          v-model="settingStyle.width"
          size="small"
          style="width: 60px;margin-left: 10px"></a-input-number>
        <span style="margin-left: 12px">高度</span>
        <a-input-number
          size="small"
          :min="1"
          @blur="v=>configChange(v,'height')"
          :max="300"
          v-model="settingStyle.height"
          style="width: 60px;margin-left: 10px"></a-input-number>
      </a-form-item>
      <a-form-item
        class="relation_graph_setting_space"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="点击后不加选中样式">
        <a-switch
          :checked="settingStyle.disableDefaultClickEffect"
          @change="v=>switchChange(v,'disableDefaultClickEffect')"
          :default-checked="settingStyle.disableDefaultClickEffect" />
      </a-form-item>
      <a-form-item
        class="relation_graph_setting_space"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="固定位置">
        <a-switch
          :checked="settingStyle.fixed"
          @change="v=>switchChange(v,'fixed')"
          :default-checked="settingStyle.fixed" />
      </a-form-item>
      <a-form-item
        class="relation_graph_setting_space"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="禁止拖动">
        <a-switch
          :checked="settingStyle.disableDrag"
          @change="v=>switchChange(v,'disableDrag')"
          :default-checked="settingStyle.disableDrag" />
      </a-form-item>
      <a-form-item>
        <a-button
          @click="save"
          style="float: right;margin-right: 12px">保存
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import Chrome from 'vue-color/src/components/Chrome'
export default {
  name: 'RelationGraphNodeSetting',
  components: {
    'chrome-picker': Chrome
  },
  mounted() {
    this.$refs.chromePicker.toggleViews = () => {
    }
    this.$refs.chromeFontPicker.toggleViews = () => {
    }
    this.updatePicker()
  },

  methods: {
    updatePicker() {
      const toggles = document.getElementsByClassName('vc-chrome-toggle-btn')
      toggles.forEach((it, index) => {
        it.style.marginTop = '15px'
        it.style.width = 'auto'
        const svgParent = it.children[0]
        const svg = svgParent.children[0]
        svgParent.removeChild(svg)
        svgParent.style.marginTop = '12px'
        const span = document.createElement('span')
        span.innerText = '关闭'
        span.addEventListener('click', () => {
          if (index === 0) {
            this.visiblePicker = false
          } else {
            this.visibleFontPicker = false
          }
        })
        svgParent.appendChild(span)
      })
    },
    initStyle(style, id) {
      this.id = id
      this.settingStyle = style
    },
    getNodeId() {
      return this.id
    },
    save() {
      const id = this.id
      const style = this.settingStyle
      this.$emit('saveOption', {
        id: id,
        style: style
      })
    },
    emitValue(obj) {
      const id = this.id
      this.$emit('configChange', Object.assign({
        id: id
      }, obj))
    },
    switchChange(v, key) {
      this.settingStyle[key] = v
      this.emitValue({ 'key': key, 'value': v })
    },
    configChange(v, key) {
      const value = v.target.value
      this.emitValue({ 'key': key, 'value': value })
    },
    updateValue(color, key) {
      if (key === 'color') {
        this.pickerColor = color.hex
        this.settingStyle.color = color.hex
      } else {
        this.pickerFontColor = color.hex
        this.settingStyle.fontColor = color.hex
      }
      this.emitValue({
        key: key,
        value: color.hex
      })
    },
    showColorPicker(view, type) {
      if (type === 0) {
        this.visibleFontPicker = false
        this.visiblePicker = true
      } else {
        this.visiblePicker = false
        this.visibleFontPicker = true
      }
    },
    getStyle() {
      return Object.assign(this.originStyle, {
        'background-color': '#f8f8f8',
        'width': '400px',
        'border': '#e5e5e5 1px solid'
      })
    }
  },
  data() {
    return {
      id: undefined,
      settingStyle: {
        width: 45, // 节点宽度
        height: 45, // 节点高度
        color: '#ff00ff', // 节点颜色
        fontColor: '#ff00ff', // 节点文本颜色
        nodeShape: 0, // 节点形状 0 圆形 1 矩形
        fixed: false, // 固定位置
        disableDrag: false, // 禁止拖动
        disableDefaultClickEffect: false // 选中后不加样式
      },
      visiblePicker: false,
      visibleFontPicker: false,
      lineShapes: [{ name: '直线', value: 1 }, { name: '简洁', value: 2 }, { name: '生动', value: 3 }, {
        name: '鱼尾',
        value: 5
      }, { name: '折线', value: 4 }],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      }
    }
  },
  props: {
    originStyle: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped lang="less">
.relation_graph_setting_space {
  margin-top: -15px;
}
</style>
